<template>
	<view class="container">
		<view class="form">
			<view class="form-item">
				<text class="label">姓名</text>
				<input type="text" v-model="form.name" placeholder="请输入真实姓名" />
			</view>
			
			<view class="form-item">
				<text class="label">学号</text>
				<input type="text" v-model="form.studentId" placeholder="请输入学号" />
			</view>
			
			<view class="form-item">
				<text class="label">手机号</text>
				<input type="number" v-model="form.phone" placeholder="请输入手机号" maxlength="11" />
			</view>
			
			<view class="form-item">
				<text class="label">所在校区</text>
				<picker @change="onCampusChange" :value="campusIndex" :range="campusList">
					<view class="picker">
						<text :class="{ placeholder: !form.campus }">{{form.campus || '请选择所在校区'}}</text>
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</picker>
			</view>
		</view>
		
		<view class="upload-section">
			<view class="title">身份证照片</view>
			<view class="upload-area">
				<view class="upload-item">
					<image v-if="form.idCardFront" :src="form.idCardFront" mode="aspectFill" @tap="previewImage('front')"></image>
					<view v-else class="upload-btn" @tap="chooseImage('front')">
						<uni-icons type="camera" size="24" color="#999"></uni-icons>
						<text>上传人像面</text>
					</view>
				</view>
				<view class="upload-item">
					<image v-if="form.idCardBack" :src="form.idCardBack" mode="aspectFill" @tap="previewImage('back')"></image>
					<view v-else class="upload-btn" @tap="chooseImage('back')">
						<uni-icons type="camera" size="24" color="#999"></uni-icons>
						<text>上传国徽面</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="agreement">
			<checkbox-group @change="onAgreementChange">
				<label>
					<checkbox :checked="form.agreement" color="#2979ff" />
					<text>我已阅读并同意</text>
					<text class="link" @tap="showAgreement">《实名认证服务协议》</text>
				</label>
			</checkbox-group>
		</view>
		
		<view class="submit-btn" :class="{ disabled: !canSubmit }" @tap="submitVerify">
			提交认证
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			campusList: ['东校区', '西校区', '南校区', '北校区'],
			campusIndex: 0,
			form: {
				name: '',
				studentId: '',
				phone: '',
				campus: '',
				idCardFront: '',
				idCardBack: '',
				agreement: false
			}
		}
	},
	computed: {
		canSubmit() {
			return this.form.name && 
				this.form.studentId && 
				this.form.phone && 
				this.form.campus && 
				this.form.idCardFront && 
				this.form.idCardBack && 
				this.form.agreement
		}
	},
	methods: {
		onCampusChange(e) {
			this.campusIndex = e.detail.value
			this.form.campus = this.campusList[this.campusIndex]
		},
		chooseImage(type) {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['camera', 'album'],
				success: (res) => {
					const tempFilePath = res.tempFilePaths[0]
					// TODO: 上传图片到服务器
					if (type === 'front') {
						this.form.idCardFront = tempFilePath
					} else {
						this.form.idCardBack = tempFilePath
					}
				}
			})
		},
		previewImage(type) {
			const current = type === 'front' ? this.form.idCardFront : this.form.idCardBack
			uni.previewImage({
				urls: [current]
			})
		},
		onAgreementChange(e) {
			this.form.agreement = e.detail.value.length > 0
		},
		showAgreement() {
			uni.navigateTo({
				url: '/pages/agreement/verify'
			})
		},
		submitVerify() {
			if (!this.canSubmit) return
			
			uni.showLoading({
				title: '提交中...'
			})
			
			// TODO: 调用后端API提交认证
			setTimeout(() => {
				uni.hideLoading()
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				})
				uni.navigateBack()
			}, 1000)
		}
	}
}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: $background-color;
	padding-bottom: 120rpx;
}

.form {
	background-color: #fff;
	padding: 0 30rpx;
	margin-top: 20rpx;
	
	.form-item {
		display: flex;
		align-items: center;
		min-height: 100rpx;
		border-bottom: 1rpx solid $border-color;
		
		&:last-child {
			border-bottom: none;
		}
		
		.label {
			width: 160rpx;
			font-size: 28rpx;
			color: $text-color;
		}
		
		input {
			flex: 1;
			font-size: 28rpx;
		}
		
		.picker {
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			text {
				font-size: 28rpx;
				color: $text-color;
				
				&.placeholder {
					color: $text-color-grey;
				}
			}
		}
	}
}

.upload-section {
	background-color: #fff;
	padding: 30rpx;
	margin-top: 20rpx;
	
	.title {
		font-size: 28rpx;
		color: $text-color;
		margin-bottom: 30rpx;
	}
	
	.upload-area {
		display: flex;
		justify-content: space-between;
		
		.upload-item {
			width: 320rpx;
			height: 200rpx;
			
			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
			
			.upload-btn {
				width: 100%;
				height: 100%;
				background-color: #f8f8f8;
				border-radius: 8rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				
				text {
					font-size: 24rpx;
					color: $text-color-grey;
					margin-top: 10rpx;
				}
			}
		}
	}
}

.agreement {
	padding: 30rpx;
	
	label {
		display: flex;
		align-items: center;
		
		text {
			font-size: 24rpx;
			color: $text-color-grey;
			margin-left: 10rpx;
			
			&.link {
				color: $theme-color;
			}
		}
	}
}

.submit-btn {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #2979ff;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	font-weight: bold;
	
	&.disabled {
		opacity: 0.5;
	}
}
</style> 